<template>
  <div ref="appRef" class="my-container-box">
    <page-header :is-title="false" :is-clique="true" @handle-tab="handleTabChange">
      <div v-permission="{ action: 'check' }" class="btn" @click="handleApprove()">
        <i class="iconfont icon-shenhe"></i>批量审批
      </div>
    </page-header>
    <search-top-form
      v-show="tableObj.tabVal != '3'"
      class="search-form"
      :search-form="searchObj.searchForm"
      :search-item="searchObj.searchItem"
      @handle-search="handleSearch"
      @handle-reset="handleReset"
      @re-count-table-height="getTableHeight"
    ></search-top-form>
    <table-page-content
      ref="tableRef"
      :loading="tableObj.loading"
      :table-data="tableObj.tableList"
      :table-headers="getTableHeaders()"
      :table-height="tableHeight"
      :is-selection="tableObj.tabVal == '1' ? true : false"
      :page-config="searchObj.pageConfig"
      @page-size-change="pageSizeChange"
      @current-page-change="currentPageChange"
    >
      <template #operate="{ row }">
        <div class="table-btn-box">
          <el-button v-permission="{ action: 'find' }" link @click="handleDetail(row.id)"
            ><i class="iconfont icon-chakanxiangqing"></i> <span class="text">查看详情</span></el-button
          >
        </div>
      </template>
    </table-page-content>
  </div>
  <approve-component ref="approveRef" @handle-added="getList"></approve-component>
</template>

<script lang="ts" setup name="DebtAudit">
import { useProxy } from '@/utils/proxy'
import { useTableHeight } from '@/hooks/tableHeight'
import { pageConfig } from '@/utils/config'
import { getPower } from '@/utils/index'
import { tableHeader1, tableHeader2, tableHeader3, searchItem } from './config'
import { getTabList, getTabLastList } from './api'
import { DicsObj, getDicsList } from '@/hooks/dicsData'
import ApproveComponent from './components/approve.vue'
const { appRef, getTableHeight, tableHeight } = useTableHeight()
const { proxy } = useProxy()
const tableRef = ref()
const approveRef = ref()
// 搜索对象
const searchObj = reactive({
  searchForm: {
    contractNo: null,
    debtName: null,
    enterpriseName: null,
    areaCode: null,
    loanTime: null,
    expirationTime: null,
    repaymentTime: null,
    debtUse: null,
    debtNature: null,
    debtType: null
  },
  pageConfig: { ...pageConfig },
  searchItem
})
const tableObj = reactive({
  loading: false,
  tabVal: '1',
  tableList: []
})
// tab切换
const handleTabChange = (val: string) => {
  tableObj.tabVal = val
  handleSearch()
}
// 动态渲染表格头
const getTableHeaders = (): any => {
  if (tableObj.tabVal == '1') {
    return tableHeader1
  } else if (tableObj.tabVal == '2') {
    return tableHeader2
  } else {
    return tableHeader3
  }
}
// 查看详情
const handleDetail = (id: string) => {
  proxy.$router.push({
    path: '/enterpriseReport/reportDetail/' + id,
    query: { type: tableObj.tabVal, menuType: '1', power: getPower('check') ? '1' : '0' }
  })
}
// 搜索
const handleSearch = () => {
  searchObj.pageConfig.pageIndex = 1
  getList()
}
const handleReset = () => {
  searchObj.searchForm = {
    contractNo: null,
    debtName: null,
    enterpriseName: null,
    areaCode: null,
    loanTime: null,
    expirationTime: null,
    repaymentTime: null,
    debtUse: null,
    debtNature: null,
    debtType: null
  }
  handleSearch()
}
// 获取列表数据
const getList = () => {
  tableObj.loading = true
  tableObj.tableList = []
  if (tableObj.tabVal == '3') {
    getTabLastList<any>({
      ...searchObj.pageConfig
    })
      .then((res) => {
        tableObj.tableList = res.data
        searchObj.pageConfig.total = res.total
        tableObj.loading = false
      })
      .catch(() => {
        tableObj.loading = false
      })
  } else {
    getTabList<any>({
      ...searchObj.searchForm,
      ...searchObj.pageConfig,
      type: tableObj.tabVal == '1' ? '2' : '9'
    })
      .then((res) => {
        tableObj.tableList = res.data
        searchObj.pageConfig.total = res.total
        tableObj.loading = false
      })
      .catch(() => {
        tableObj.loading = false
      })
  }
}
// 表格切换page-size
const pageSizeChange = (val: number) => {
  searchObj.pageConfig.pageSize = val
  searchObj.pageConfig.pageIndex = 1
  getList()
}
// 切换分页
const currentPageChange = (val: number) => {
  searchObj.pageConfig.pageIndex = val
  getList()
}
// 批量审批
const handleApprove = () => {
  let selectItem = tableRef.value.getAllSelectItem()
  if (selectItem.length == 0) {
    return proxy.$message.msgError('请至少选择一条数据')
  }
  approveRef.value.state.approveId = selectItem.map((v: any) => v.id)
  approveRef.value.state.show = true
}
const init = () => {
  getDicsList(DicsObj.debtUse, false, { isAllChild: 1 }).then((res: any) => {
    searchObj.searchItem[7].children = res
  })
  getDicsList(DicsObj.debtNature, false, { isAllChild: 1 }).then((res: any) => {
    searchObj.searchItem[8].children = res
  })
  getDicsList(DicsObj.debtType, false, { isAllChild: 1 }).then((res: any) => {
    searchObj.searchItem[9].children = res
  })
}
onActivated(() => {
  getList()
})
init()
</script>

<style lang="scss" scoped></style>
